import { Card, Select, Switch } from 'antd';

import { NODE_TYPE } from '@/constants/config';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useDictStore } from '@/store/dict';

export const RuleMatch = memo(() => {
  const { dictListOperatorOptions } = useDictStore();
  const { getNodeDataFor, setNodeDataFor } = useCurrentNode<NODE_TYPE.RULE>();
  const data = getNodeDataFor();

  return (
    <Card size="small" title="规则配置" className="rule-match mt-12">
      <div className="flex gap-12">
        <div className="flex items-center gap-8">
          <span className="text-14">集合判断</span>
          <Switch
            value={data?.enableListOperator}
            onChange={(enableListOperator) => {
              setNodeDataFor({
                ...data,
                enableListOperator
              } as any);
            }}
          />
        </div>

        {data?.enableListOperator && (
          <Select
            value={data.listOperator}
            onChange={(listOperator) => {
              setNodeDataFor({
                ...data,
                listOperator
              });
            }}
            className="w-250"
            placeholder="请选择集合判断"
            options={dictListOperatorOptions}
          />
        )}
      </div>
    </Card>
  );
});
